{% load staticfiles %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>回答界面</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title">
    <link rel="stylesheet" href="{% static 'css/common.css' %}" media="screen" title="no title">
    <link rel="stylesheet" href="{% static 'css/answer.css' %}" media="screen" title="no title">
  </head>
  <body>
    <div class="top nav">
        <div class="ui fixed borderless menu">
            <div class="logo item">
                <a href="{% url 'home' %}">
                    <img src="{% static 'images/logo.png' %}" alt="" class="ui image" />
                </a>
            </div>
            <div class="item">
                <div class="ui icon input">
                  <input class="prompt" placeholder="搜索您感兴趣的内容..." type="text">
                  <i class="search icon"></i>
                </div>
            </div>
            <a class="item">
                <img src="{% static 'images/question_icon.png' %}" alt="" class="ui image" />
                <span class="nav text">提问</span>
            </a>
            <a class="item">
                <img src="{% static 'images/read_icon.png' %}" alt="" class="ui image" />
                <span class="nav text">阅读</span>
            </a>
            <a class="item">
                <img src="{% static 'images/answer_icon.png' %}" alt="" class="ui image" />
                <span class="nav text">回答</span>
            </a>
            <div class="right menu">
                <a class="item">
                    <img src="{% static 'images/avatar_hou.png' %}" alt="" class="ui image" />
                    <span class="nav text">侯爵</span>
                </a>
            </div>
        </div>
    </div>
<!-- 标题栏结束 -->
<!-- 内容部分开始 -->
    <div class="ui basic segment" style="margin-bottom:0px;padding-bottom:0px;">
      <div class="ui grid">
        <div class="three wide column"></div>
        <!-- 空格 -->
        <div class="seven wide column">
          <div class="on the line">
            <span class="active item all question">
              全部话题
            </span>
          </div>
          <!-- 线上的内容 -->
          <div class="ui divider"></div>
          <!-- 第一条线 -->
            <button class="ui circular blue button" style="width:48px;height:24px;padding:0px;"><span style="color: #ffffff;">CSS</span></button>
            <!-- circular是让按钮变成圆弧形 -->
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">Python</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">GitHub</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">设计模式</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">工具资源</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">移动开发</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">黑科技</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">程序员</span></button>
<!-- 最后的margin-left值要修改-->
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-top:10px;"><span style="color: #225599;">代码规范</span></button>
            <button class="ui circular basic button" style="width:91px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">JavaScript</span></button>
            <button class="ui circular basic button" style="width:56px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">面试</span></button>
            <button class="ui circular basic button" style="width:56px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">算法</span></button>
            <button class="ui circular basic button" style="width:56px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">性能</span></button>
            <button class="ui circular basic button" style="width:56px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">开源</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">Django</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">HTML</span></button>

            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-top:10px;"><span style="color: #225599;">数据库</span></button>
            <button class="ui circular basic button" style="width:66px;height:24px;padding:0px;margin-left:10px;color:#daecf5;"><span style="color: #225599;">表结构</span></button>

            <span style="color: #666666;margin-left:13px;">展开更多</span>
            <!-- 按钮们结束 -->
          <div class="ui divider"></div>
          <!-- 第二条线 -->
    <!-- 第一个人部分 -->
          <div class="ui items">
            <div class="item">
              <div class="ui image">
                <img src="{% static 'images/avatar_yellow.png' %}" style="width:38px;height:38px">
              </div>
              <div class="content" style="padding-left:10px;">
                <div class="header" style="color:#2e5e9f;font-size:14px;">
                  CSS 的主要缺陷是什么？
                </div>
                <span style="color:#BFBFBF">3分钟前</span>
                <div class="meta">
                  <span style="font-weight:bold;color:#000000;">尤雨溪,</span>
                  <span style="color:#BFBFBF">不会搞艺术的程序员不是好设计师</span>
                </div>

                <div class="ui basic segment-p">
                  <p style="line-height: 1.69;">假如不考虑不同浏览器的兼容性问题，把 CSS 当为一个可以用在桌面电脑、移动设备、平面印刷等等领域的通用样式语言，会产生哪些问题呢？它的主要缺陷是什么？有哪些事情是不适合用 CSS 做的，希望得到解答，谢谢… <a style="fort-size:12px;line-height:1.83">显示全部</a></p>
                </div>

                <div class="extra">
                  <button style="width: 77px;height: 28px;border-radius: 3px;background-color: #eff6fa;border: solid 1px #bbcadc;"><i class="write icon" style="color: #225599;"></i><span style="color: #225599;">回答</span></button>
                </div>

                </div>
              </div>
              <div class="ui divider"></div>
          </div>
    <!-- 第二个人部分 -->
          <div class="ui items">
            <div class="item">
              <div class="ui image">
                <img src="{% static 'images/avatar_green.png' %}" style="width:38px;height:38px">
              </div>
              <div class="content" style="padding-left:10px;">
                <div class="header" style="color:#2e5e9f;font-size:14px;">
                  关于viewer.js的问题 图片查看时如何设置居中？
                </div>
                <span style="color:#BFBFBF">2小时前</span>
                <div class="meta">
                  <span style="font-weight:bold;color:#000000;">贺嘉，</span>
                  <span style="color:#BFBFBF">腾讯云布道师、TEDxZhuhai策展人</span>
                </div>

                <div class="ui basic segment-p">
                  <img class="ui small left floated image" src="{% static 'images/answer_img.png' %}" style="width: 200px;height: 130px;">
                  <p style="line-height: 1.69;">Viewer.js – 强大的JS/jQuery图片查看器。根据以上资料自己做了个demo。由于工作需要，要在bootstrap的modal层里应用viewer，遇到的问题是：在modal层里应用viewer无法居中，如图：请问，该如何设置使预览放大的照片在modal内居中？代码：jsfiddle 点击查看... <a style="fort-size:12px;line-height:1.83">显示全部</a></p>
                </div>

                <div class="extra">
                  <button style="width: 77px;height: 28px;border-radius: 3px;background-color: #eff6fa;border: solid 1px #bbcadc;margin:0px;"><i class="write icon" style="color: #225599;"></i><span style="color: #225599;">回答</span></button>
                </div>

                </div>
              </div>
          </div>
    <!-- 第二个人结束 -->
    <!-- 按钮开始 -->
          <div class="ui button" tabindex="0" style="color:#225599;width:633px;height:35px;margin-left:0px;margin-top:300px;margin-bottom:0px;background-color:#eff6fa;">
            <div class="visible content">加载更多</div>
          </div>



        </div><!-- 七格栅格系统结束 -->
        <div class="six wide column"></div>
        <!-- 空格 -->
      </div>
    </div>
    <!-- 内容部分结束 -->
    <!-- 网页footer部分开始 -->
        <div class="ui basic segment footer">
          <div class="ui divider" style="width:960px;height:3px;"></div>
          <div class="ui three column grid">
            <div class="column">
              <div class="footer1">Developed by Mugglecoding team 一队五组</div>
            </div>
            <div class="column">
              <div class="footer2">关于我们 . 加入我们 . 联系我们</div>
            </div>
            <div class="column">
              <div class="footer3">京ICP备15047012号-2</div>
            </div>
          </div>
        </div>

    <!-- 网页footer部分结束 -->
  </body>
</html>
